import React, { useState, useEffect } from "react"
import service from "@@/services/user.service"
import md5 from 'js-md5'
import { BaseEventOrig, Image, Picker, Text, View } from "@tarojs/components"
import {
    useDidHide,
    useDidShow,
    usePageScroll,
    usePullDownRefresh,
    useReachBottom,
    useReady,
    useResize,
    useTabItemTap,
    navigateTo,
    Current
} from "@tarojs/taro"
import NavLayout from "@@/components/layout/nav.layout"
import TInput from "@@/t-ui/input.tui"
import TButton from "@@/t-ui/button.tui"
import TToast from "@@/t-ui/toast.tui"
import "./modifyPwd.scss"

//密码校验正则 密码中必须包含字母（不区分大小写）、数字6-14位
const pwdRegexp = /(?=.*[0-9])(?=.*[a-zA-Z]).{6,14}/;

const Index = () => {
    const [newPassWord, setNewPassWord] = useState<string>("")//新密码
    const [passWord, setPassWord] = useState<string>("")//再次密码
    const [secretKey, setSecretKey] = useState<unknown>("")//密钥
    const [pwdFail, setPwdFail] = useState<boolean>(false)//密码错误提示
    const [isOpened, setIsOpened] = useState<boolean>(false)//错误提示
    const [toastMsg, setToastMsg] = useState<string>("")//轻提示内容
    useEffect(() => {
        setSecretKey(Current.router?.params?.secretKey)
    }, [])
    //完成
    const finish = () => {
        if (TARO_ENV === "h5") {
            if (newPassWord !== passWord) {
                openToast("前后密码不一致")
                return false
            }
            if (!pwdRegexp.test(passWord)) {
                openToast("密码中必须包含字母（不区分大小写）、数字6-14位")
                return false
            }
            if (typeof secretKey === "string") {
                service.retrievePassword({ secretKey, passWord: md5(passWord) }).then(res => {
                    if (res.code === 200) {
                        navigateTo({
                            url: "/pages/login/login"
                        })
                    }
                })
            }
        }
    }
    const openToast = (str: string) => {
        setToastMsg(str)
        setIsOpened(true)
        setTimeout(() => {
            setIsOpened(false)
        }, 500)
    }
    return (
        <NavLayout border leftIconType="chevron-left" color="#141414" id="LoginPage">
            <View className={'logo_view'}>
                <Image mode={"aspectFit"} src={require('@@/assets/img/login_logo.png')} />
            </View>
            <View className="form">
                <View className={"title"}>修改密码</View>
                <View className="input-item">
                    <TInput
                        border={false}
                        name="newPwd"
                        type="password"
                        placeholder="请输入新的密码"
                        onChange={v => {
                            if (v && !pwdRegexp.test(v)) {
                                setPwdFail(true)
                            } else {
                                setPwdFail(false)
                                setNewPassWord(v);
                            }
                            return v
                        }}
                    />
                </View>
                <View className="input-item">
                    <TInput
                        border={false}
                        name="passWord"
                        type='password'
                        placeholder="请再次输入重复密码"
                        onChange={v => {
                            setPassWord(v)
                            return v
                        }}
                    />
                </View>
                {
                    pwdFail && <View className={"msg_box"}>
                        <View className={'warning_logo'}><Image mode={"aspectFit"} src={require('@@/assets/img/warning.png')} /></View>
                        <Text>长度为8-14个字符，字母/数字以及标点符号至少包含2种</Text>
                    </View>
                }
            </View>
            <View className="form-btn">
                <TButton type="primary" onClick={finish}>完成</TButton>
            </View>
            <TToast isOpened={isOpened} text={toastMsg} />
        </NavLayout>
    )
}

export default Index